<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }
    </style>
</head>

<body>

    <div id="container"></div>
    <script>
        const div = document.getElementById('container')

        div.addEventListener('click', function () {
            //this指向
            // console.log(this, 12);

            setTimeout(() => {
                console.log(this);//指向最外层函数作用域

                this.style.background = 'pink'
            })
        })

        const arr = [1, 2, 3, 5, 4, 6, 7,]


        //普通函数形式
        // const result = arr.filter(function (item) {
        // if (item % 2 === 0) {
        //     return true
        // }
        // return
        // })

        // 箭头函数
        const result = arr.filter(item => item % 2 === 0)
        console.log(result);


        //箭头函数不适合与作用域this有关的函数 不适合事件回调
        //以及对象中的属性
        
        // {
        //     name: 'lili'
        //     fn: function() {
        //         this.name: name
        //     }
        //     //箭头函数指向全局对象window
        // }

    </script>
</body>

</html>